import React, { useState } from 'react'

const Cascader = ({ options }) => {
  const [selectedValues, setSelectedValues] = useState(['1'])

  const handleSelect = (value, level) => {
    const newSelectedValues = [...selectedValues]
    newSelectedValues[level] = value
    setSelectedValues(newSelectedValues.slice(0, level + 1))
  }

  const handleClear = (level) => {
    const newSelectedValues = selectedValues.slice(0, level)
    setSelectedValues(newSelectedValues)
  }

  const renderOptions = (level) => {
    const currentOptions = options[level]

    return currentOptions.map((option) => (
      <option key={option} value={option}>
        {option}
      </option>
    ))
  }

  return (
    <div>
      {selectedValues.map((value, level) => (
        <div key={level}>
          <select
            value={value}
            onChange={(e) => handleSelect(e.target.value, level)}
          >
            <option value="">请选择</option>
            {renderOptions(level)}
          </select>
          <button onClick={() => handleClear(level)}>清除</button>
        </div>
      ))}
    </div>
  )
}

export default Cascader
